<template>
    <div class="outer">
        <div class="inner">
            <div class="inner_first">
                <div class="author_img">
                    <el-avatar :size="140" :src="this.authorMessage.userAvatar">
                        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                    </el-avatar>
                </div>
                <div class="message_content">
                    <div class="author_name">{{authorMessage.userName}}</div>
                    <div class="author_introduce">{{authorMessage.description}}</div>
                    <div class="author_shenfen">作者数字身份：</div>
                    <div class="author_hash_code">{{authorMessage.publisherIdentity}}</div>
                </div>
                <div class="vertical_line"></div>
                <div class="yue_gao" @click.stop="yuegao">找TA约稿</div>
            </div>


            <div class="articleList">
                <div v-for="item in filterList()" :key="item.id" class="listItem" @click.stop="toDetail(item)">
                    <div class="item_category">
                        <div class="item_category_inner">
                            {{filterType(item.chooseCreationType)}}
                        </div>
                    </div>
                    <div class="item_right">
                        <div class="title_author_price">
                            <div class="title_author">
                                <div class="title">{{item.title}}</div>
                                <div class="author">作者：{{item.publisher}}</div>
                            </div>
                            <div class="price" v-if="(item.price == 0 ) || (item.price == null)">免费</div>
                            <div class="price" v-else>￥{{item.price}}</div>
                        </div>
                        <div class="item_content">
                            {{item.description}}
                        </div>
                        <div class="item_choose">
                            <div @click.stop="to_zhineng(item)">智能合约</div>
<!--                            <div>下载</div>-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="fen_ye_qi">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="currentChange"
                        :current-page="current_page"
                        @prev-click="prevClick"
                        @next-click="nextClick">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {GetAuthorDetail} from "../../../api/dsp/dsp_author_detail";
    import baseConfig from "@/utils/config"
    import author from "../../common/author";

    export default {
        name: "index",
        data() {
            return {
                list: [
                    {id: 1},
                    {id: 2},
                    {id: 3},
                    {id: 4},
                    {id: 5},
                    {id: 6},
                    {id: 7},
                    {id: 8},
                ],
                total: undefined,
                current_page: 1,
                authorMessage: {},
            }
        },

        mounted() {

            //获取作者个人信息
            GetAuthorDetail({id: this.$route.query.id, creationTypeId: 1}).then(res => {
                console.log('作者个人信息为：', res.data[0])
                this.authorMessage = res.data[0]
                this.authorMessage.userAvatar = baseConfig.dev + this.authorMessage.userAvatar



                //   判断总共有多少页
                //this.authorMessage.scriptWriting
                if(this.authorMessage.scriptWriting.length<=8){
                    this.total=10
                }else{
                    //    判断总数是否为8的整倍数
                    if((parseInt(this.authorMessage.scriptWriting.length) % 8) != 0){

                        this.total=parseInt(parseInt(this.authorMessage.scriptWriting.length) / 8)*10+10

                    }else{

                        this.total=parseInt(parseInt(this.authorMessage.scriptWriting.length) / 8)*10

                    }

                }


            })
        },

        methods: {
            to_zhineng(data){
                //      ContractId
                //    TokenId
                //    http://106.14.18.148:4000/tokens/0xefb454e89efff1e734432060e34d536dfa8eed65/instance/57/token-transfers
                console.log('传过去的数据',data)
                let href='http://106.14.18.148:4000/tokens/'+data.contractId+'/instance/'+data.tokenId+'/token-transfers'
                window.open(href, '_blank');
            },
            toDetail(item){
              this.$router.push({path:'/dsp/dspDetail',query:{id:item.id}})
            },
            yuegao(){
                this.$router.push({path:'/dsp/upArticle',query:{id:this.authorMessage.id,author:this.authorMessage.userName}})
            },
            filterType(data) {
                console.log('choose type',data)

                // let res = ''
                // data.forEach(item => {
                //     res+=item.creationTypeName+' '
                // })
                // return res

                return data[0].creationTypeName
            },
            filterList(){

                //this.authorMessage.scriptWriting
                if(this.authorMessage.scriptWriting != undefined){
                    if( this.current_page == 1 ){
                        return this.authorMessage.scriptWriting.slice(0,8)
                    }else{
                        return this.authorMessage.scriptWriting.slice(this.current_page*8-8,this.current_page*8)
                    }
                }else{
                    return []
                }

            },
            currentChange(res) {

                this.current_page = res

                this.filterList()

            },
            prevClick() {

            },
            nextClick() {

            }

        }
    }
</script>

<style scoped>
    .outer {
        width: 100%;
        overflow: hidden;
    }

    .inner {

        width: 1001px;
        margin: 0px auto;
    }

    .inner_first {
        width: 1001px;
        height: 217px;
        background: #FFFFFF;
        margin: 0px auto;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        margin-top: 17px;
        display: flex;
        align-items: center;
    }

    .author_img {
        margin-left: 51px;
    }

    .message_content {
        width: 448px;
        margin-left: 36px;
    }

    .author_name {
        min-width: 0px;
        max-width: 448px;
        font-size: 16px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .author_introduce {
        font-size: 14px;
        line-height: 20px;
        margin-top: 5px;
        width: 100%;
        min-height: 20px;
        max-height: 40px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;

        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .author_shenfen {
        margin-top: 25px;
        font-size: 14px;
        line-height: 14px;
        color: #666666;
        font-weight: 400;
    }

    .author_hash_code {
        font-size: 14px;
        line-height: 14px;
        color: #2EB0C6;
        margin-top: 12px;
        font-weight: 400;
    }


    .vertical_line {
        width: 1px;
        height: 88px;
        background: #CCCCCC;
        margin-left: 93px;
    }

    .yue_gao {
        width: 108px;
        height: 42px;
        background: rgba(46, 176, 198, 0.15);
        border: 1px solid #2EB0C6;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2EB0C6;
        text-align: center;
        line-height: 42px;
        cursor: pointer;

        margin-left: 61px;
    }

    .articleList {
        width: 100%;
        min-height: 260px;
        /*height: 1100px;*/
        max-height: 1120px;
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .listItem {
        width: 490px;
        height: 260px;
        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .item_category {
        width: 50px;
        height: 260px;
        background: #2EB0C6;
        border-radius: 4px 0px 0px 4px;
        display: flex;
        align-items: center;
    }

    .item_category_inner {
        width: 17px;
        min-height: 0px;
        max-height: 260px;
        /*height: 100px;*/
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        margin: 0px auto;
    }

    .item_right {
        flex-grow: 1;
        background: #FFFFFF;
        position: relative;
    }

    .title_author_price {
        width: 391px;
        display: flex;
        justify-content: space-between;
        margin: 0px auto;
    }

    .title_author {
        margin-top: 31px;
    }

    .title_author > div {
        max-width: 322px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .title {
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .author {
        margin-top: 14px;
        /*height: 14px;*/
        font-size: 14px;
        /*line-height: 14px;*/
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .price {
        margin-top: 37px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
    }

    .item_content {

        width: 391px;
        height: 72px;
        font-size: 14px;
        line-height: 25px;
        margin: 0px auto;
        margin-top: 29px;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .item_choose {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 70px;
        border-top: 1px solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .item_choose > div {
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        text-align: center;
    }

    .item_choose > div:nth-of-type(1) {
        width: 92px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-left: 118px;
    }

    .item_choose > div:nth-of-type(2) {
        width: 92px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-right: 119px;
    }

    .fen_ye_qi {
        min-width: 109px;
        max-width: 430px;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26px;
        margin-bottom: 115px;
    }


</style>
